<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar">
      <text class="time">1:21 AM</text>
      <view class="battery-icons">
        <image class="wifi-icon" src="/static/wifi-icon.png"></image>
        <text class="battery">100%</text>
      </view>
    </view>

    <!-- 用户信息 -->
    <view class="user-info">
      <image class="avatar" src="/static/avatar.png"></image>
      <text class="username">lucat</text>
    </view>

    <!-- 推广板块 -->
    <view class="promotion-section">
      <view class="promotion-content">
        <view class="elderly-images">
          <image class="elderly-female" src="/static/elderly-female.png"></image>
          <image class="elderly-male" src="/static/elderly-male.png"></image>
        </view>
        <text class="promotion-title">健康追踪自评问卷</text>
        <text class="promotion-period">周期：7天</text>
        <text class="promotion-description">通过睡眠、情绪等日常问题快速测评</text>
        <button class="start-button">开始测评</button>
      </view>
    </view>

    <!-- 健康文章区域 -->
    <view class="health-articles">
      <view class="articles-header">
        <text class="articles-title">健康文章</text>
        <text class="view-all">查看全部 ></text>
      </view>
      <view class="article-item">
        <image class="article-image" src="/static/kiwi.png"></image>
        <view class="article-info">
          <text class="article-title">这几种水果不甜却容易胖!一文揭示水果的「含糖真相」</text>
          <text class="article-summary">吃水果很多人把它当成减肥期的第一选择...</text>
          <text class="article-time">2025-01-26 21:41</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.container {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background-color: #f5f5f5;
}

.status-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.time {
  font-size: 14px;
  color: #333;
}

.battery-icons {
  display: flex;
  align-items: center;
}

.wifi-icon {
  width: 16px;
  height: 16px;
  margin-right: 5px;
}

.battery {
  font-size: 14px;
  color: #333;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 20px;
  margin-right: 10px;
}

.username {
  font-size: 16px;
  color: #333;
}

.promotion-section {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.promotion-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.elderly-images {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 15px;
}

.elderly-female,
.elderly-male {
  width: 45%;
  height: 120px;
  border-radius: 10px;
}

.promotion-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5px;
}

.promotion-period {
  font-size: 14px;
  color: #666;
  margin-bottom: 10px;
}

.promotion-description {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}

.start-button {
  background-color: #2196f3;
  color: white;
  width: 100%;
  padding: 10px 0;
  border-radius: 5px;
}

.health-articles {
  background-color: #fff;
  border-radius: 10px;
  padding: 20px;
}

.articles-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.articles-title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 14px;
  color: #2196f3;
}

.article-item {
  display: flex;
  align-items: center;
}

.article-image {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  margin-right: 15px;
}

.article-info {
  flex: 1;
}

.article-title {
  font-size: 16px;
  color: #333;
  margin-bottom: 5px;
}

.article-summary {
  font-size: 14px;
  color: #666;
  margin-bottom: 5px;
}

.article-time {
  font-size: 12px;
  color: #999;
}
</style>